<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <div>
        <span style="color: #409eff; font-size: 15px;">排序规则：</span>
        <el-select size="small" placeholder="请选择" v-model="info.count">
          <el-option label="普通订单" value="0"></el-option>
          <el-option label="限时抢购" value="1"></el-option>
          <el-option label="团购" value="2"></el-option>
          <el-option label="促销优惠" value="3"></el-option>
          <el-option label="预售" value="4"></el-option>
        </el-select>
      </div>
      <router-link to="/type/add"><span class="el-icon-plus add-btn"></span></router-link>
    </div>
    <div class="table-box">
      <el-table :data="info.list" border stripe>
        <el-table-column align="center" type="index" width="50"></el-table-column>
        <el-table-column align="center" prop="classID" label="分类ID" width="80"></el-table-column>
        <el-table-column align="center" prop="className" label="分类名称" width="180"></el-table-column>
        <el-table-column align="center" prop="statusText" label="状态" width="180"></el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间" width="200"></el-table-column>
        <el-table-column></el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleStatus(scope.row)" v-if="info.list[scope.$index].status == '1'">禁用</el-button>
            <el-button size="mini" @click="handleStatus(scope.row)" v-else>启用</el-button>

            <el-button size="mini" @click="$router.push('/type/detail?id=' + info.list[scope.$index].classID)">查看</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        page: "1",
        count: 3,
        status: 0,
        list: [{}]
      }
    }
  },  
  methods: {
    handleStatus(row){
      const _this = this;
      this.$ajax({
        url: "Productclass/updateStatus",
        data: {
          app:{
            status: row.status === 1 ? 0 : 1,
            classID: row.classID
          }
        },
        perfect(con, res) {
          _this.$message({
            message: res.data.msg,
            type: 'success',
            onClose(){
              _this.$router.go(0);
            }
          });
        },
        success(res) {
          console.log(res);
        }
      });
    },
    handleEdit(row) {
      window.sessionStorage.typeData = JSON.stringify(row);
      this.$router.push("/type/edit");
    },
    handleDelete(row) {
      this.$confirm("确定要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除操作
        console.log(row);
      }).catch(() => {});
    }
  },
  created() {
    //获取详情操作
    const _this = this;
    const id = this.$route.query.id;
    this.$ajax({
      url: "Productclass/getSecondList",
      data: {
        app:{
          classID:id
        }
      },
      perfect(con) {
        _this.info.list = con;
      }
    });
  }
};
</script>

<style scoped>
.title {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}
.back-btn {
  text-align: center;
}
</style>
